<template>
  <ul :list="list" class="list-items list-bordered" @drop="onDrop" @dragover="onDragOver">
    <li
      v-for="(item, index) in list"
      :key="item.id"
      class="list-item"
      :class="{ active: item.id === selectedId, ghost: dragData.currentDragging === item.id }"
      draggable="true"
      :data-index="index"
      @dragstart="onDragStart($event, item.id, index)"
      @dragenter="onDragEnter($event, index)"
      @click="handleClick(item.id)"
    >
      <el-tooltip placement="top" :content="item.isHidden ? '显示' : '隐藏'">
        <el-button circle @click="handleChange(item.id, 'isHidden', !item.isHidden)">
          <template #icon>
            <el-icon v-if="item.isHidden"><View /></el-icon>
            <el-icon v-else><Hide /></el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <el-tooltip placement="top" :content="item.isLocked ? '解锁' : '锁定'">
        <el-button circle @click="handleChange(item.id, 'isLocked', !item.isLocked)">
          <template #icon>
            <el-icon v-if="item.isLocked"><Unlock /></el-icon>
            <el-icon v-else><Lock /></el-icon>
          </template>
        </el-button>
      </el-tooltip>
      <inline-edit
        class="edit-area"
        :value="item.layerName"
        @change="value => handleChange(item.id, 'layerName', value)"
      ></inline-edit>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { View, Hide, Lock, Unlock } from '@element-plus/icons-vue'
import { ComponentData } from '../stores/editor'
// import { getParentElement } from '@/utils/utils'
import { arrayMoveMutable } from 'array-move'

const props = defineProps<{
  list: Array<ComponentData>
  selectedId?: string
}>()

const emits = defineEmits(['select', 'change', 'drop'])

const dragData = reactive({
  currentDragging: '',
  currentIndex: -1
})

let start = -1
let end = -1

const onDragStart = (e: DragEvent, id: string, index: number) => {
  dragData.currentDragging = id
  dragData.currentIndex = index
  start = index
}

const onDragEnter = (e: DragEvent, index: number) => {
  if (index !== dragData.currentIndex) {
    console.log('enter', index, dragData.currentIndex)
    arrayMoveMutable(props.list, dragData.currentIndex, index)
    dragData.currentIndex = index
    end = index
  }
}

const onDrop = (e: DragEvent) => {
  // const currentElement = getParentElement(e.target as HTMLElement, 'list-item')
  // if (currentElement && currentElement.dataset.index) {
  //   const moveIndex = parseInt(currentElement.dataset.index)
  //   console.log(moveIndex)
  //   arrayMoveMutable(props.list, dragData.currentIndex, moveIndex)
  // }
  emits('drop', { start, end })
  dragData.currentDragging = ''
}

const onDragOver = (e: DragEvent) => {
  e.preventDefault()
}

function handleChange(id: string, key: string, value: boolean) {
  const data = {
    id,
    key,
    value,
    isRoot: true
  }
  emits('change', data)
}

function handleClick(id: string) {
  emits('select', id)
}
</script>

<style lang="scss" scoped>
.list-items {
  list-style-type: none;
}
.list-item {
  padding: 10px 15px;
  transition: all 0.5s ease-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  //   justify-content: normal;
  border: 1px solid #fff;
  //   dcdfe6
  border-bottom-color: #f0f0f0;
}
.list-item.active {
  border: 1px solid #1890ff;
}
.list-item.ghost {
  opacity: 0.5;
}

.list-item:hover {
  background: #e6f7ff;
}
// .list-item > * {
//   margin-right: 10px;
// }

// .list-item:last-child {
//   border-bottom: none;
// }

.list-item .handle {
  cursor: move;
  margin-left: auto;
}
.list-item .edit-area {
  margin-left: 12px;
  //   width: 100%;
}
</style>
